/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="service-test__container">
        <sf-form ref="form"
                 class="visual-form"
                 :label-width="100">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>上传测试文件</lang>
                </sf-fieldlabel>
                <sf-textfield
                    ref="uploadTextField"
                    v-model="submitData.file"
                    :default-width="120"
                    :placeholder="_('请选择模型文件')"
                    :allow-blank="false"
                    :default-disabled="true" />
                <sf-fileupload 
                    ref="fileUpload"
                    class="sfv-btn-primary"
                    url="training/v1/model/file"
                    :params="uploadParams"
                    :accept="acceptFile"
                    :before-upload="beforePackageUpload"
                    @uploadfile:failure="handleUploadFail"
                    @uploadfile:success="handleUploadSuccess"
                    @progress="handleProgress">
                    <lang>选择</lang>
                </sf-fileupload>
                <div class="file-tips">
                    <lang>支持扩展名：.csv</lang>
                </div>
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>服务名称</lang>
                </sf-fieldlabel>
                <sf-select v-model="chartType"
                           :default-width="184"
                           :allow-search="true"
                           :allow-blank="false"
                           :options="chartTypeList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>服务URL</lang>
                </sf-fieldlabel>
                <div class="service-url">
                    asdf
                </div>
            </sf-form-item>
            <sf-button-primary class="test-button"
                               @click="_newProject">
                <lang>开始测试</lang>
            </sf-button-primary>
        </sf-form>
        <div class="chart__container">
            <empty-panel 
                :title="_('暂时没有服务测试结果')" 
                :text="_('请在左侧上传测试所需的数据，以及所要测试的目标服务名称')" 
                :small="true" />
        </div>
    </div>
</template>
<script>
    
const FIELD_WIDTH = 200;
import EmptyPanel from 'src/components/empty_panel';
const ACEEPT_TYPE = ['.csv'];
import BMF from 'browser-md5-file';
const MAX_SIZE = 2147483648; // 2GB
const DEFAULT_VALUE = {
    name: '',
    description: '',
    register: 1,
    sourceType: 0,
    s3Address:'',
    file:''
};
export default {
    name: 'FeatureVisual',
    components:{
        EmptyPanel
    },
        
    data () {
        return {
            submitData: { ...DEFAULT_VALUE },
            chartType:'bar',
            fieldList:[],
            chartTypeList:[{
                label:_('柱状图'),
                value:'bar'
            }, {
                label:_('折线图'),
                value:'line'
            }],
            progress:0,
            uploadParams:{
                MD5: ''
            }
        };
    },
    computed: {
        fieldWidth () {
            return FIELD_WIDTH;
        },
        acceptFile () {
            return ACEEPT_TYPE.join(',');
        },
        acceptFileText () {
            return _('支持扩展名：{0}', ACEEPT_TYPE.join(' '));
        }
    },
    mounted () {
           
    },
    methods: {

        // 上传相关
        beforePackageUpload (files) {
            let file = files[0];
            let bmf = new BMF();

            if (!/.csv$/.test(file.name)) {
                this.$showErr(_('只支持上传{0}文件', this.acceptFile));
                return false;
            }
            if (file.size > MAX_SIZE) {
                this.$showErr(_('上传文件的体积应小于2GB'));
                return false;
            }
            let vm = this;
            /* eslint-disable */
                    return new Promise((resolve, reject) => {
                        bmf.md5(
                            file,
                            (err, md5) => {
                                vm.uploadParams.MD5 = md5;
                                resolve(true);
                            }
                        );
                    });
                },
        
                handleUploadFail () {
                    this.$unmask();
                    this.$showErr('上传失败');
                },
                /* eslint-disable */
                handleUploadSuccess (fileupload, result, file, jsonData) {
                    if (jsonData.success) {
                        this.submitData.s3Address = jsonData.data;
                        this.submitData.file = file.name;
                        this.$unmask();
                        this.$ok('上传成功');
                    }
                },
        }
    };
    </script>
    <style lang="less">
        .service-test__container{
            height: 444px;
            display: flex;
            .sfv-form{
                padding: 10px 8px;
            }
            .sfv-fileupload_btn{
                min-width: 56px;
                padding: 0;
            }
            .file-tips{
                margin-top: 10px;
            }
            .visual-form{
                width: 200px;
                border: 1px solid #ddd;
                margin-left: 20px;
                margin-right: 5px;
              
                .form-item--first{
                    margin-bottom: 5px;
                }
                .sfv-fieldlabel-left{
                    padding-left: 0;
                }
            }
            .chart__container{
                width: 716px;
                height: 100%;
                border: 1px solid #ddd;
                margin-right: 20px
            }
            .test-button{
                margin-top: 158px;
                width: 184px;
            }
        }
    
    </style>
        